<template>
  <div>
    <el-card>
      <el-page-header icon="" content="个人中心" title="企业门户管理系统">
      </el-page-header>
      <el-row :gutter="20" class="el-row">
        <el-col :span="6">
          <el-card class="box-card"
            ><el-avatar :size="80" :src="avatarUrl" />
            <h3>{{ store.state.userInfo.userName }}</h3>
            <h3>{{ store.state.userInfo.role === 1 ? '管理员' : '编辑' }}</h3>
          </el-card>
        </el-col>
        <el-col :span="18">
          <el-card class="box-card1">
            <template #header>
              <div class="card-header">
                <span>个人信息</span>
              </div>
            </template>
            <el-form
              ref="userFormRef"
              :model="userForm"
              :rules="userFormRules"
              label-width="80px"
              class="demo-ruleForm"
            >
              <el-form-item label="用户名" prop="userName">
                <el-input v-model="userForm.userName" />
              </el-form-item>
              <el-form-item label="性别" prop="gender">
                <el-select
                  v-model="userForm.gender"
                  style="width: 100%"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in options"
                    :label="item.label"
                    :value="item.value"
                    :key="item.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="个人简介" prop="introduction">
                <el-input v-model="userForm.introduction" type="textarea" />
              </el-form-item>
              <el-form-item label="用户头像" prop="avatar">
                <Upload
                  :avatar="userForm.avatar"
                  @fileChange="handleChange"
                ></Upload>
              </el-form-item>
              <el-form-item class="btn-right">
                <el-button type="primary" @click="submitForm()">
                  提交
                </el-button>
              </el-form-item>
            </el-form>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script setup>
import { computed, ref, reactive } from 'vue'
import { useStore } from 'vuex'
import axios from 'axios'
import { ElMessage } from 'element-plus'
import upload from '@/util/upload'
import Upload from '@/components/upload/Upload.vue'

const store = useStore()

const avatarUrl = computed(() =>
  store.state.userInfo.avatar
    ? 'http://localhost:3000' + store.state.userInfo.avatar
    : `https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png`
)

const { userName, gender, introduction, avatar } = store.state.userInfo
const userFormRef = ref()
const userForm = reactive({
  userName,
  gender,
  introduction,
  avatar,
  file: null
})

const userFormRules = reactive({
  userName: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  gender: [{ required: true, message: '请选择性别', trigger: 'blur' }],
  introduction: [{ required: true, message: '请输入简介', trigger: 'blur' }],
  avatar: [{ required: true, message: '请上传头像', trigger: 'blur' }]
})

const options = [
  { label: '保密', value: 0 },
  { label: '男', value: 1 },
  { label: '女', value: 2 }
]

const handleChange = (file) => {
  userForm.avatar = URL.createObjectURL(file)
  // console.log(userForm.avatar)
  userForm.file = file
}

const submitForm = () => {
  userFormRef.value.validate(async (valid) => {
    if (valid) {
      console.log('userForm', userForm)
      const res = await upload('/adminApi/user/upload', userForm)
      console.log(res.data)
      if (res.data.code == '0000') {
        store.commit('changeUserInfo', res.data.data)
        ElMessage.success(res.data.msg)
      }
    }
  })
}
</script>

<style scoped lang="scss">
.el-row {
  margin-top: 20px;
  .box-card {
    text-align: center;
  }
}
.btn-right {
  float: right;
}
</style>
